﻿@namespace GraphRag.Net.Web.Pages.Demo
@page "/Graph"

<div id="graph">
    <div style="height:calc(100vh - 30px);width:100%;border:#eeeeee solid 1px;">
        <relation-graph ref="seeksRelationGraph"
                        :options="graphOptions"
                        :on-node-click="onNodeClick" />
    </div>
</div>
<Modal Title="@nodeTitle" Visible="@isModalVisible" OnOk="HandleOk" OnCancel="HandleCancel">
    @nodeDescription
</Modal>
<!-- 引入relation-graph -->
<script src="./js/vue2.js"></script>
<script src="./js/screenfull.min.js"></script>
<script src="./js/html2canvas.min.js"></script>
<script src="./js/relation-graph.umd.js"></script>

<script>
    // window.onload = function () {
    //      // 等待 Blazor 初始化完成
    //    Blazor.start().then(function () {
    //       initializeVueApp(dotNetHelper);
    //    });
    // };
    function initializeVueApp(dotNetHelper) {
        let graph = new Vue({
            el: '#graph',
            data: {
                message: 'Hello Vue!',
                graphOptions: {
                    defaultJunctionPoint: 'border'
                    // 这里可以参考"Graph 图谱"中的参数进行设置
                }
            },
            mounted() {
                this.showRelationGraph();
            },
            methods: {
                showRelationGraph() {

                    console.log('ref:btn:', this.$refs.btn);
                    console.log('ref:', this.$refs.seeksRelationGraph);
                    const url = new URL(window.location.href);

                    // 获取查询字符串部分
                    const queryString = url.search;

                    // 解析查询字符串为一个 URLSearchParams 对象
                    const urlParams = new URLSearchParams(queryString);

                    // 获取参数的值，例如 'index'
                    const index = urlParams.get('index');
                    fetch('/api/Graph/GetAllGraphs?index=' + index)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('网络响应不成功，状态码：' + response.status);
                            }
                            return response.json(); // 或者 response.json() 取决于你的响应内容类型
                        })
                        .then(data => {
                            // 请求成功，处理响应数据
                            console.log(data);
                            this.$refs.seeksRelationGraph.setJsonData(data, (seeksRGGraph) => {
                                // 这些写上当图谱初始化完成后需要执行的代码
                            });
                        })
                        .catch(error => {
                            // 处理错误
                            console.error('请求出错：', error);
                        });
                },
                onNodeClick(nodeObject, $event) {
                     dotNetHelper.invokeMethodAsync('ShowNodeDescription',nodeObject.text, nodeObject.data.desc);
                }
            }
        })
    }
</script>

@code
{
    [Inject]
    protected IJSRuntime _jsRuntime { get; set; }

    private bool isModalVisible = false;
    private string nodeDescription = string.Empty;
    private string nodeTitle = string.Empty;

    private DotNetObjectReference<Graph> objRef;

    [JSInvokable("ShowNodeDescription")]
    public void ShowNodeDescription(string title, string description)
    {
        nodeTitle = title;
        nodeDescription = description;
        isModalVisible = true;
        StateHasChanged();
    }

    private void HandleOk()
    {
        isModalVisible = false;
    }

    private void HandleCancel()
    {
        isModalVisible = false;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 确保所有脚本加载完成后，调用初始化 Vue 的 JavaScript 函数
            await Task.Delay(500); // 短暂延时
            objRef = DotNetObjectReference.Create(this);
            try
            {
                await _jsRuntime.InvokeVoidAsync("initializeVueApp", objRef);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }
    }

    public void Dispose()
    {
        objRef?.Dispose();
    }
}